<template>
  <div class="main">
    <myHeader />
    <div class="main_content">
      <div class="problem_list">
        <div class="problem_list_header">
          <div class="difficulty">
            <el-dropdown trigger="click">
              <el-button type="primary">
                更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item>双皮奶</el-dropdown-item>
                <el-dropdown-item>蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

          <div class="status">
            <el-dropdown trigger="click">
              <el-button type="primary">
                更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item>双皮奶</el-dropdown-item>
                <el-dropdown-item>蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

          <div class="tag">
            <el-dropdown trigger="click">
              <el-button type="primary">
                更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item>双皮奶</el-dropdown-item>
                <el-dropdown-item>蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="input_div">
            <el-input v-model="input" placeholder="请输入内容" class="input"></el-input>
          </div>
          <div class="select">
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
          </div>
          <div class="problem_day">
            <el-button type="primary" round>每日一套</el-button>
          </div>
        </div>
        <div class="problem_list_content">
          <div class="problem_list_show">
            <choiceProblem v-for="(item,index) in problems" :data="item" :key="index"
                           @click.native='getChoiceProblemDetail(item)' />
          </div>
        </div>
      </div>
      <div class="info">
        <div class="user_info">
          <div>
            <own />
          </div>
        </div>
        <div class="problem_ranking_info">
          <div>
            <simpleProblemRankingList />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import myHeader from "@/components/header.vue";
import own from "@/components/own.vue";
import simpleProblemRankingList from "@/components/simple_problem_ranking";
import choiceProblem from "@/components/ChoiceProblem";

export default {
  name: "FillInBlanksProblemList",
  components: {
    myHeader,
    own,
    simpleProblemRankingList,
    choiceProblem,
  },
  data() {
    return {
      input: "",
      problems: [],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      show_height: "1000px",
    };
  },
  mounted() {
    var that = this
    this.$axios({
      method: "GET",
      url: "http://81.70.192.34:8088/problem/searchChoiceProblemList",
    })
        .then((res) => {
          var list = res.data.data.records
          for (let i = 0; i < list.length; i++) {
            var finish = null;
            if (list[i].isFinish != null) {
              finish = 'Y'
            } else {
              finish = 'N'
            }
            that.problems.push({
              name: list[i].problemName,
              difficulty: list[i].difficulty,
              isFinish: finish,
              problemId: list[i].id,
            })
          }
          console.log(this.tableData);
        })
        .catch((error) => {
          console.error(error);
        });
  },
  methods: {
    getChoiceProblemDetail: function (data) {
      this.$router.push({
        path: '/problem/choice/details',
        query: {
          data: this.qs.stringify(data)
        }
      })
    },

  }

};
</script>

<style scoped>
.main {
  height: 90vh;
  width: 100vw;
}

.main_content {
  margin-top: 5vh;
  display: flex;
  flex-wrap: wrap;
}

.problem_list {
  margin-left: 3vw;
  height: 83vh;
  width: 70vw;
  display: flex;
  flex-wrap: wrap;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.problem_list_header {
  height: 5vh;
  width: 70vw;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #e6e6e6;
}

.difficulty {
  margin-left: 2vw;
  line-height: 5vh;
}

.status {
  margin-left: 2vw;
  line-height: 5vh;
}

.tag {
  margin-left: 2vw;
  line-height: 5vh;
}

.input_div {
  margin-left: 8vw;
  line-height: 5vh;
}

.input {
  width: 15vw;
}

.select {
  margin-left: 1vw;
  line-height: 5vh;
}

.problem_day {
  margin-left: 10%;
  line-height: 5vh;
}

.problem_list_content {
  height: 78vh;
  width: 70vw;
}

.problem_list_show {
  display: flex;
  flex-wrap: wrap;
}

.info {
  margin-left: 3vw;
  height: 83vh;
  width: 20vw;
  display: flex;
  flex-wrap: wrap;
}

.user_info {
  height: 43vh;
  width: 20vw;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  text-align: center;
}

.problem_ranking_info {
  margin-top: 2vh;
  height: 38vh;
  width: 20vw;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
</style>